class RenderSY extends Render {
  constructor(dataSY) {
    super()
    this.getData()
    this.dataSY = dataSY
    upTop(this)

  }

  getData() {
    let renderSy_this = this
    //获取精选数据
    $.ajax({
      type: "GET",
      url: "/data_sy_js",
      success: function (response) {
        //回调函数
        renderSy_this.renderJS(response)
      }
    });
    //获取轮播数据
    $.ajax({
      type: "GET",
      url: "/data_sy_lb",
      success: function (response) {
        //回调函数
        renderSy_this.renderLB(response)
      }
    });
    //获取排行榜数据
    $.ajax({
      type: "GET",
      url: "/data_sy_phb",
      success: function (response) {
        //回调函数
        renderSy_this.renderPHB(response)
      }
    });
  }
  //获取数据

  //渲染精选
  renderJS(data) {
    let renderSy_this = this
    //循环遍历精选
    $.each($(`.top`), function (e) {
      let renderJS = ``
      for (let i = 0; i < 6; i++) {
        renderJS += `
        <div data-v-6aa3d8bd="" data-v-3f14a35e="" class="book-vertical" onclick="location.href='http://127.0.0.1:8080/QQLB/src/pages/QQread-book.html?bid=${data.data[e+1][(e+1)*10][i].bid}'">
        <div data-v-6aa3d8bd="" class="book"><img data-v-6aa3d8bd="" src="https://wfqqreader-1252317822.image.myqcloud.com/cover/${data.data[e+1][(e+1)*10][i].bid%1000}/${data.data[e+1][(e+1)*10][i].bid}/b_${data.data[e+1][(e+1)*10][i].bid}.jpg"
            class="cover ypc-book-cover" >
          <div data-v-6aa3d8bd="" class="free">免费</div>
        </div>
        <p data-v-6aa3d8bd="" class="name ypc-link" >${data.data[e+1][(e+1)*10][i].title}</p>
        <p data-v-6aa3d8bd="" class="intro" >${data.data[e+1][(e+1)*10][i].intro}</p>
        <div data-v-6aa3d8bd="" class="other"><span data-v-6aa3d8bd="" class="author">${data.data[e+1][(e+1)*10][i].author}</span> <span
            data-v-6aa3d8bd="" class="uv">${(data.data[e+1][(e+1)*10][i].readingNum/10000).toFixed(1)}万读过</span></div>
      </div>
          `
      }
      //插入html
      // $(this).html(renderJS)
      renderSy_this.renderHTML($(this), renderJS)
    })
  }

  //渲染轮播
  renderLB(data) {
    let renderLB = ``
    for (let i = 0; i < data.data[204812].length; i++) {
      renderLB += `
      <div data-v-f05d6fd0="" class="item"  onclick="location.href='http://127.0.0.1:8080/QQLB/src/pages/QQread-book.html?bid=${data.data[204812][i].destUrl.replace(/[^0-9]/ig, '')}'">
      <p data-v-f05d6fd0="" class="title ypc-link bold">${data.data[204812][i].title}</p>
      <p data-v-f05d6fd0="" class="desc">${data.data[204812][i].content}</p>
    </div>
    `
    }
    // $(`.news`).html(renderLB)
    this.renderHTML($(`.news`), renderLB)
  }

  //渲染排行榜
  renderPHB(data) {
    //常量
    let renderSy_this = this
    let PHBBT = this.dataSY[0]
    let PHBDATA = this.dataSY[1]
    //遍历所有排行榜数据
    $.each($(`.columns`), function (e) {
      let renderPHB = ``
      for (let i = 0; i < 3; i++) {
        let renderPHB_a = ``
        //头三个
        for (let j = 1; j < 4; j++) {
          renderPHB_a += `        
            <div data-v-2a0b4ec4="" class="simple" onclick="location.href='http://127.0.0.1:8080/QQLB/src/pages/QQread-book.html?bid=${data.data[e+1][PHBDATA[e][i]].bookList[j-1].bid}'">
              <img data-v-2a0b4ec4="" src="../static/rank${j}.png" alt="rank" class="icon"> 
  
               <div data-v-2a0b4ec4="" class="content invisible">
               <p data-v-2a0b4ec4="" class="name ypc-link ">${data.data[e+1][PHBDATA[e][i]].bookList[j-1].title}</p>
               <p data-v-2a0b4ec4="" class="intro invisible">${data.data[e+1][PHBDATA[e][i]].bookList[j-1].intro}</p>
               <div data-v-2a0b4ec4="" class="other invisible">
                 <span data-v-2a0b4ec4="" class="author invisible">${data.data[e+1][PHBDATA[e][i]].bookList[j-1].author}</span>
               </div>
               </div>
               <div data-v-2a0b4ec4="" class="book invisible "><img data-v-2a0b4ec4=""
               src="https://wfqqreader-1252317822.image.myqcloud.com/cover/${data.data[e+1][PHBDATA[e][i]].bookList[j-1].bid%1000}/${data.data[e+1][PHBDATA[e][i]].bookList[j-1].bid}/b_${data.data[e+1][PHBDATA[e][i]].bookList[j-1].bid}.jpg" class="cover invisible">
               </div> 
  
              <span data-v-2a0b4ec4="" class="name Finvisible">
               ${data.data[e+1][PHBDATA[e][i]].bookList[j-1].title}
              </span>
            </div>
            
            `

        }
        //后七个
        for (let n = 4; n <= 10; n++) {
          renderPHB_a += `
              <div data-v-2a0b4ec4="" class="simple" onclick="location.href='http://127.0.0.1:8080/QQLB/src/pages/QQread-book.html?bid=${data.data[e+1][PHBDATA[e][i]].bookList[n-1].bid}'"><span data-v-2a0b4ec4="" class="no">${n}</span> <span
              data-v-2a0b4ec4="" class="name Finvisible">${data.data[e+1][PHBDATA[e][i]].bookList[n-1].title}</span>
              
              <div data-v-2a0b4ec4="" class="content invisible"> 
              <p data-v-2a0b4ec4="" class="name ypc-link ">${data.data[e+1][PHBDATA[e][i]].bookList[n-1].title}</p>
              <p data-v-2a0b4ec4="" class="intro invisible">${data.data[e+1][PHBDATA[e][i]].bookList[n-1].intro}</p>
              <div data-v-2a0b4ec4="" class="other invisible">
                <span data-v-2a0b4ec4="" class="author invisible">${data.data[e+1][PHBDATA[e][i]].bookList[n-1].author}</span>
              </div>
              </div>
              <div data-v-2a0b4ec4="" class="book invisible "><img data-v-2a0b4ec4=""
              src="https://wfqqreader-1252317822.image.myqcloud.com/cover/${(data.data[e+1][PHBDATA[e][i]].bookList[n-1].bid)%1000}/${data.data[e+1][PHBDATA[e][i]].bookList[n-1].bid}/b_${data.data[e+1][PHBDATA[e][i]].bookList[n-1].bid}.jpg" class="cover invisible">
              </div> 
  
  
  
              </div>
              `
        }
        //拼接
        renderPHB += ` 
        <div data-v-3f14a35e="" class="column">
            <p data-v-3f14a35e="" class="ypc-column-name ypc-link"><span data-v-3f14a35e="">${PHBBT[e][i]}</span> <i
                data-v-3f14a35e="" class="iconfont icon-arrow-right"></i></p>
  
              <div data-v-3f14a35e="" class="books">
                <div data-v-2a0b4ec4="" data-v-3f14a35e="" class="book-rank-list">
                  ${renderPHB_a}
                  </div>
              </div>
          </div>
              `
      }
      //塞进去
      // $(this).html(renderPHB)
      renderSy_this.renderHTML($(this), renderPHB)
    })

    //初始化
    for (let i = 0; i < 90; i++) {
      if (i % 10 === 0) {
        $(`.book-rank-list`).children().eq(i).addClass("hover").removeClass("simple").css('background-image', `url(../static/rank-bg${i/10}.png)`);
        $(`.book-rank-list`).children().eq(i).children(`.invisible`).addClass(`PHB_display`).removeClass(`PHB_hide`).children(`img`).addClass(`PHB_display`).removeClass(`PHB_hide`)
        $(`.book-rank-list`).children().eq(i).children(`.Finvisible`).addClass(`PHB_hide`)
      }
    }

    //初始隐藏
    $(`.invisible`).addClass(`PHB_hide`)

    //遍历
    $(`.book-rank-list`).each(
      function (e) {
        //存this
        const list = $(this)
        $(this).children().hover(
          function () {
            $(this).children(`.Finvisible`).addClass(`PHB_hide`)
            list.children().children(`.book`).children(`img`).addClass(`PHB_hide`).removeClass(`PHB_display`)
            $(this).children(`.invisible`).addClass(`PHB_display`).removeClass(`PHB_hide`).children(`img`).addClass(`PHB_display`).removeClass(`PHB_hide`)

            list.children().addClass("simple").removeClass("hover").css('background-image', ``);
            $(this).addClass("hover").removeClass("simple").css('background-image', `url(../static/rank-bg${e}.png)`);
          }
        )
      }
    )
  }

}